<script setup lang="ts">
import { inject, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();

interface IKnowledgelist {
  id: string;
  title: string;
  synopsis: string
}

const knowledgelist = ref<IKnowledgelist[]>([
  {
    id: '1',
    title: '默认知识库',
    synopsis: '你好！作为默认知识库，我这里存储着大量多领域的信息，旨在帮助用户解答问题、提供信息和学习资料。无论是关于科学、技术、文化、历史、语言还是日常生活中的疑问，我都尽力提供准确且易懂的答案。如果你有任何问题，随时可以问我！'
  },
  {
    id: '2',
    title: '默认知识库',
    synopsis: '你好！作为默认知识库，我这里存储着大量多领域的信息，旨在帮助用户解答问题、提供信息和学习资料。无论是关于科学、技术、文化、历史、语言还是日常生活中的疑问，我都尽力提供准确且易懂的答案。如果你有任何问题，随时可以问我！'
  },
  {
    id: '3',
    title: '默认知识库',
    synopsis: '你好！作为默认知识库，我这里存储着大量多领域的信息，旨在帮助用户解答问题、提供信息和学习资料。无论是关于科学、技术、文化、历史、语言还是日常生活中的疑问，我都尽力提供准确且易懂的答案。如果你有任何问题，随时可以问我！'
  },
  {
    id: '4',
    title: '默认知识库',
    synopsis: '你好！作为默认知识库，我这里存储着大量多领域的信息，旨在帮助用户解答问题、提供信息和学习资料。无论是关于科学、技术、文化、历史、语言还是日常生活中的疑问，我都尽力提供准确且易懂的答案。如果你有任何问题，随时可以问我！'
  },
  {
    id: '5',
    title: '默认知识库',
    synopsis: '你好！作为默认知识库，我这里存储着大量多领域的信息，旨在帮助用户解答问题、提供信息和学习资料。无论是关于科学、技术、文化、历史、语言还是日常生活中的疑问，我都尽力提供准确且易懂的答案。如果你有任何问题，随时可以问我！'
  }, {
    id: '6',
    title: '默认知识库',
    synopsis: '你好！作为默认知识库，我这里存储着大量多领域的信息，旨在帮助用户解答问题、提供信息和学习资料。无论是关于科学、技术、文化、历史、语言还是日常生活中的疑问，我都尽力提供准确且易懂的答案。如果你有任何问题，随时可以问我！'
  }, {
    id: '7',
    title: '默认知识库',
    synopsis: '你好！作为默认知识库，我这里存储着大量多领域的信息，旨在帮助用户解答问题、提供信息和学习资料。无论是关于科学、技术、文化、历史、语言还是日常生活中的疑问，我都尽力提供准确且易懂的答案。如果你有任何问题，随时可以问我！'
  }, {
    id: '8',
    title: '默认知识库',
    synopsis: '你好！作为默认知识库，我这里存储着大量多领域的信息，旨在帮助用户解答问题、提供信息和学习资料。无论是关于科学、技术、文化、历史、语言还是日常生活中的疑问，我都尽力提供准确且易懂的答案。如果你有任何问题，随时可以问我！'
  }, {
    id: '9',
    title: '默认知识库',
    synopsis: '你好！作为默认知识库，我这里存储着大量多领域的信息，旨在帮助用户解答问题、提供信息和学习资料。无论是关于科学、技术、文化、历史、语言还是日常生活中的疑问，我都尽力提供准确且易懂的答案。如果你有任何问题，随时可以问我！'
  }, {
    id: '10',
    title: '默认知识库',
    synopsis: '你好！作为默认知识库，我这里存储着大量多领域的信息，旨在帮助用户解答问题、提供信息和学习资料。无论是关于科学、技术、文化、历史、语言还是日常生活中的疑问，我都尽力提供准确且易懂的答案。如果你有任何问题，随时可以问我！'
  }, {
    id: '11',
    title: '默认知识库',
    synopsis: '你好！作为默认知识库，我这里存储着大量多领域的信息，旨在帮助用户解答问题、提供信息和学习资料。无论是关于科学、技术、文化、历史、语言还是日常生活中的疑问，我都尽力提供准确且易懂的答案。如果你有任何问题，随时可以问我！'
  }
])

const goToList = (item: IKnowledgelist) => {
  router.push({
    path: '/knowledgeBaseList',
    query: {
      ...item
    }
  })
}

</script>

<template>
  <div class="KnowledgeBase">
    <div class="header">
      <div class="style">
        <el-icon size="28" color="#409eff">
          <Menu />
        </el-icon>
        <span class="padding"></span>
        <el-icon size="28">
          <Operation />
        </el-icon>
      </div>
      <div class="handle">
        <el-button type="primary" icon="Plus" size="large" plain>新建知识库</el-button>
      </div>
    </div>
    <div class="content">
      <!-- <div class="title">
        我的知识库
      </div> -->
      <div class="card">
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in knowledgelist" :key="item.id">
            <el-card style="width: 100%; height: 12em;margin: 1em 0;" @click="goToList(item)">
              <div class="card-item-title">
                <el-icon size="25" color="#409eff">
                  <Document />
                </el-icon>
                <span style="font-size: 1em; font-weight: bold; padding-left: 0.5em;">{{ item.title }}</span>
              </div>
              <div class="card-item-synopsis">
                {{ item.synopsis }}
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.KnowledgeBase {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .style {
      cursor: pointer;

      .padding {
        display: inline-block;
        width: 1em;
      }
    }
  }

  .content {
    .title {
      padding: 1em 0;
      font-size: 0.9em;
      letter-spacing: 1px;
    }

    .card {
      cursor: pointer;

      .card-item-title {
        display: flex;
        align-items: center;
      }

      .card-item-synopsis {
        font-size: 0.8em;
        letter-spacing: 1px;
        color: #8a8f8d;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        /* 限制为2行 */
        -webkit-box-orient: vertical;
        margin: 1em 0;
        /* 确保没有额外的外边距干扰 */
        padding: 0;
        /* 同样确保没有内边距问题 */
      }
    }
  }
}
</style>
